<template>
  <el-dialog :close-on-click-modal="false" append-to-body width="70%" title="新增" :visible="show" :before-close="close">
    <div class="dialog-container">
        <div class="left">
            <Tree ref="TreeRef" @change="deptChange" @onLoad="onLoadTree"></Tree>
        </div>
        <div class="content">
        <el-row :gutter="20" style="margin-bottom: 20px;margin-right: 0;">
            <el-col :span="6"><el-input v-model="queryParams._name_" type="text" placeholder="请输入姓名" @change="getList"></el-input></el-col>
            <el-col :span="6"><el-input v-model="queryParams.userName" type="text" placeholder="请输入账号" @change="getList"></el-input></el-col>
        </el-row>
        <el-table ref="TabelRef" :data="tableData" border @select="onSelect">
            <el-table-column  type="selection"  width="55"></el-table-column>
            <el-table-column type="index" label="序号" width="50" align="center" show-overflow-tooltip>
            <template slot-scope="{$index}">
                {{$index + 1 + (queryParams.page - 1) * queryParams.pageSize}}
            </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" align="left" show-overflow-tooltip></el-table-column>
            <el-table-column prop="userName" label="账号" min-width="120" align="left" show-overflow-tooltip></el-table-column>
            <el-table-column prop="mobile" label="手机号" min-width="120" align="left" show-overflow-tooltip></el-table-column>
            <el-table-column prop="groupName" label="部门" min-width="120" align="left" show-overflow-tooltip></el-table-column>
        </el-table>
        <Pagination v-show="total" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.pageSize" @pagination="getList"></Pagination>
        </div>
    </div>
  </el-dialog>
</template>
<script>
import {memberList} from '@/api/user';
import {getMemberIds, addUser} from '@/api/person'
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    clazzGroup: {
      type: [Object, null],
      default: null,
    },
  },
  data() {
    return {
        queryParams: {
            page: 1,
            pageSize: 20
        },
        total: 0,
        tableData: [],
        lastDataOk: true,
        selectIds: [],
        group: {},
    }
  },
  methods: {
    init() {
        this.queryParams.page = 1;
        // this.queryParams.groupPath = this.group.groupPath;
        this.getList()
    },
    close() {
        this.$emit('change')
      this.$emit("update:show", false);
    },
    async getList() {
        try {
            const res = await memberList(this.queryParams)
            this.tableData = res.data;
            this.total = res.total;
            this.getMemberIds()
        } catch (error) {
            
        }
    },
    async getMemberIds() {
        try {
            const res = await getMemberIds({path: this.group.groupPath})
            if(res.data && res.data.length) {
                const select = this.tableData.filter(item => {
                    if(res.data.includes(item.id)) {
                        return item;
                    }
                })
                select.forEach(item => {
                    this.$refs['TabelRef'].toggleRowSelection(item, true)
                })
                
            }
            this.selectIds = res.data || [];
        } catch (error) {
            
        }
    },
    onSelect(selection, row) {
        // console.log(selection, row)
        const form = {
            memberId: row.id,
            memberCode: row.code,
            memberName: row.name,
            mobile: row.mobile,
            groupId: row.groupId,
            groupPath: row.groupPath,
            groupName: row.groupName,
            teamId: this.clazzGroup.id,
            teamName: this.clazzGroup.name,
        }
        if(!this.lastDataOk || this.selectIds.includes(row.id)) {
            this.$refs['TabelRef'].toggleRowSelection(row, true)
            return;
        }
        addUser(form).then(res => {
            this.$message.success('操作成功')
            this.lastDataOk = true;
        })
    },
    onLoadTree(e) {
        console.log(e)
        // const defaultPath = e[0].path;
        // this.$refs['TreeRef'].setCurrentKey(defaultPath);
        // this.queryParams.groupPath = defaultPath
        this.init()
    },
    deptChange(e) {
        console.log(e)
        this.group = e;
        this.queryParams.groupPath = e.groupPath;
        this.getList()
    }
  },
};
</script>
<style lang="scss" scoped>
.dialog-container {
    display: flex;
    .left {
        width: 300px;
    }
    .content {
        flex: 1;
        margin-left: 20px;
    }
}
</style>